<template>
<div>
  <h1>健康商城</h1>
  <el-form :inline="true" :model="esVo" class="demo-form-inline">
    <el-form-item label="商品">
      <el-input v-model="esVo.goodsName" placeholder="商品搜索"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getlist()">查询</el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="goCart">去购物车查看</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="goodsId" label="商品编号" width="180"></el-table-column>
    <el-table-column label="商品名称" width="180">
      <template slot-scope="scope">
        <a v-html="scope.row.goodsName"></a>
      </template>
    </el-table-column>
    <el-table-column prop="goodsStock" label="商品数量" width="180"></el-table-column>
    <el-table-column prop="goodsState" label="商家状态" width="180"></el-table-column>
    <!--      <el-table-column prop="storePwd" label="商家密码" width="180"></el-table-column>-->
    <!--      <el-table-column prop="storeTel" label="商家手机号" width="180"></el-table-column>-->
    <!--      <el-table-column prop="storeCode" label="商家验证码" width="180"></el-table-column>-->
    <!--      <el-table-column prop="userId" label="编号" width="180"></el-table-column>-->
    <el-table-column prop="goodsQuantity" label="角色" width="180"></el-table-column>
    <!--      <el-table-column prop="deleted" label="日期" width="180"></el-table-column>-->
    <el-table-column prop="goodsUpdatetime" label="创建日期" width="180"></el-table-column>
    <el-table-column prop="createTime" label="最后修改日期" width="180"></el-table-column>
    <el-table-column prop="updateTime" label="最后修改日期" width="180"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
<!--        <el-input-number size="mini" v-model="scope.row.num"></el-input-number>-->
        <el-button size="mini" @click="addToCart(scope.row)">加入购物车</el-button>
<!--        <el-button size="mini" type="danger" @click="handleDelete(scope.row.storeId)">删除</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="esVo.page"
      :page-sizes="[1, 3, 6, 9]"
      :page-size="esVo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="esVo.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "index",
      data(){
        return{
          tableData:[],
          esVo:{page:1,size:3,total:0}
        }
      },
      methods:{
        getlist(){
          // let userName= sessionStorage.getItem("userName")
          // console.log(userName)
          // let userId= sessionStorage.getItem("userId")
          // console.log(userId)
          // let userRole= sessionStorage.getItem("userRole")
          // console.log(userRole)
          var us= new FormData();
          us.append("page",this.esVo.page)
          us.append("size",this.esVo.size)
          us.append("total",this.esVo.total)
          // us.append("userName",userName)
          // us.append("userId",userId)
          // us.append("userRole",userRole)
          axios.post("http://localhost:7000/shop/goods/goodslist",this.esVo,us).then(res=>{
            console.log(us)
            console.log(res)
            this.esVo.total=res.data.data.total
            this.tableData=res.data.data.goodslist
          })
        },
        handleSizeChange(val) {
          this.esVo.size=val
          console.log(`每页 ${val} 条`);
          this.getlist()
        },
        handleCurrentChange(val) {
          this.esVo.page=val
          console.log(`当前页: ${val}`);
          this.getlist()
        },
        addToCart(row) {
          axios.post("http://localhost:7000/shop/cart/addToCart/"+row.goodsId).then(res=>{
            console.log(res)
          })
        },
        goCart(){
          this.$router.push('cart');
        }
        // handleDelete(storeId) {
        //   console.log(storeId);
        // }
      },
      mounted() {
        this.getlist()
      }
    }
</script>

<style scoped>

</style>
